<template>
  <view v-if="shenheStatus == 0" class="order">
    <view class="head">
      <view class="money">
        <text>累计订单金额：</text>
        <text>￥{{ total || 0 }}</text>
      </view>
      <picker mode="date" fields="month" @change="changeDate">
        <view class="date">
          <text class="iconfont icon-filter"></text>
          <text>{{ !queryDate ? $t("mdAdmin.queryTime") : queryDate }}</text>
        </view>
      </picker>
    </view>
    <view class="item" v-for="item in orderList" :key="item.id">
      <orderItem :order="item" ref="order"></orderItem>
    </view>
    <view class="empty" style="padding-top: 50rpx">
      <u-empty mode="data" v-if="!orderList.length"></u-empty>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import orderItem from "./components/order-item.vue";
export default {
  components: {
    orderItem,
    Shenhe,
  },
  data() {
    return {
      // 订单列表
      orderList: [],
      // 当前加载页面
      page: 1,
      // 是否加载完毕
      noMore: false,
      // 当前筛选日期
      queryDate: "",
      // 总佣金
      total: 0,
      type: -1,
    };
  },
  methods: {
    // 获取订单列表
    async getOrders() {
      const res = await this.$allrequest.shareholder.shareOrder(
        {
          page: this.page,
          time: this.queryDate,
          type: this.type,
        },
        true
      );
      if (res.code == 0) {
        this.total = res.data.total;
        this.orderList = [...this.orderList, ...res.data.list];
        if (this.orderList.length >= res.data.row_count) {
          this.noMore = true;
        } else {
          this.noMore = false;
        }
      }
    },
    // 改变筛选时间
    changeDate(e) {
      this.orderList = [];
      this.page = 1;
      this.noMore = false;
      this.queryDate = e.detail.value;
      this.getOrders();
    },
  },
  onLoad(opi) {
    if (opi.type) this.type = opi.type;
  },
  onShow() {
    this.orderList = [];
    this.page = 1;
    this.noMore = false;
    this.getOrders();
  },
  onReachBottom() {
    if (!this.noMore) {
      this.page++;
      this.getOrders();
    }
  },
};
</script>

<style lang="scss" scoped>
.order {
  min-height: 100vh;
  background-color: #f2f2f2;
  padding-bottom: 20rpx;
  padding-top: 108rpx;
  font-family: PingFang SC;
  color: #262626;
  .head {
    width: 100%;
    height: 84rpx;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    justify-content: space-between;
    .money {
      font-size: 28rpx;
      font-weight: 600;
      color: #262626;
      text:nth-child(2) {
        color: #f13d29;
      }
    }
    .date {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      .iconfont {
        font-size: 40rpx;
        margin-right: 6rpx;
      }
    }
  }
  .item {
    margin-bottom: 24rpx;
  }
  .noMore {
    width: 100%;
    height: 120rpx;
    font-size: 22rpx;
    color: #c1c1c1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
